<template>
  <!-- 用户详情  --历史数据 -->
  <div class="FlWaterMeterRecord">
    <!-- 搜索框-->
    <div style="padding: 0px 0px">
      <!-- {{waterNo}} -->
      <!-- <div style="font-weight:700;padding:10px 10px 10px 50px;">用户详情</div> -->
      <searchComponentsCss
        class="searchComponentsRecord"
        :searchData="searchData"
        :optionsZi="optionsZi"
        :searchOptionTable="searchOptionTable"
        :shrinkBoxOpenClose="shrinkBoxOpenClose"
        @searchCallBack="searchCallBack"
      ></searchComponentsCss>
      <!-- 收缩框 -->
      <!-- {{numSearch}} -->
      <div class="shrinkBox" @click="shrinkBoxOpenClose = !shrinkBoxOpenClose">
        <i
          :class="shrinkBoxOpenClose ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          v-if="numSearch > 8"
        ></i>
      </div>
      <!--<el-button class="FlWaterMeterRecordSearch" type="primary" size="mini" @click="sunS_F" plain>搜索</el-button>-->
      <!-- @clearSearch='clearSearch' -->
      <div style="border-top: 1px solid #e6e6e6; margin: 0px 30px"></div>

      <div
        class="right_row"
        style="padding: 25px 30px; margin-top: -10px; margin-bottom: -10px"
      >
        <!--<buttonhurdle
          class="buttonhurdle"
          :diaDataAdd="searchData"
          :optionsZi="optionsZi"
          :searchOptionTable="searchOptionTable"
          @toAdd="toAdd"
          @toDelete="toDelete"
        ></buttonhurdle>
        <importXlsx
          class="importX"
          :importUrl='importUrl'
          :suoS='suoS'
          :multipleSelection='multipleSelection'
        />-->
        <exportXlsxOne
          style="padding: 10px; display: inline-block"
          class="importX"
          :importUrl="importUrl"
          :suoS="suoS"
          :multipleSelection="multipleSelection"
          :oDisabled="oDisabled"
        />
        <rightButtons
          style="float: right; padding: 10px"
          @sunS_F="sunS_F"
          @emptySearch="emptySearch"
          @configuration="configuration"
          class="right_buttons"
        ></rightButtons>
      </div>
    </div>
    <!-- 表格 -->
    <div class="out">
      <!--数据列表-->
      <!-- 字典 -->
      <dictionaries
        :searchData="searchData"
        :modelType="modelType"
        @optionData="dictionariesCallBack"
      ></dictionaries>
      <el-table
        ref="multipleTable"
        :data="dataAttribute"
        v-loading.body="false"
        border
        fit
        max-height="500px"
        highlight-current-row
        size="mini"
        :cell-style="{ padding: '5px 0' }"
        @selection-change="handleSelectionChange"
        @sort-change="sortChangeTable"
      >
        <el-table-column
          align="center"
          type="selection"
          :show-overflow-tooltip="true"
          width="55"
        ></el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethod"
          width="50"
        >
        </el-table-column>
        <el-table-column
          align="center"
          v-for="item in searchData"
          v-if="item.tableSign"
          :key="item.id"
          :label="item.CN"
          :prop="item.EN"
          :sortable="customMethod"
          :show-overflow-tooltip="true"
          min-width="140px"
        >
          <template slot-scope="scope">{{
            item.type === "select"
              ? optionDatas(
                  item.typeGroupCode ? optionsZi[item.EN] : searchOptionTable[item.EN],
                  scope.row[item.EN]
                )
              : scope.row[item.EN]
          }}</template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="280px" fixed="right">
          <template slot-scope="scope" class="do">
            <el-button
              style="color:#0B9AC3;border:none;"
              icon="el-icon-view"
              circle
              @click="makeExaId(scope.row.id)"
            ></el-button>
            <modificationi
              class="inline_block"
              :attributeOrder="searchData"
              :optionsZi="optionsZi"
              :searchOptionTable="searchOptionTable"
              :modData="scope.row"
              @modifyData="modifyData"
            ></modificationi>
            <el-button
              style="color:#C90010;border:none;"
              icon="el-icon-delete"
              circle
              @click="deleteList(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      ></el-pagination>
    </div>

    <!-- 查看组件 -->
    <examine
      :DialogVisibleMod="DialogVisibleExamine"
      :modData="examineData"
      :optionsZi="optionsZi"
      :searchOptionTable="searchOptionTable"
      :attributeOrder="searchData"
      @examineDialog="examineDialog"
    ></examine>
  </div>
</template>

<script>
//引入组件
import {
  SearchCForL,
  searchComponents,
  buttonhurdle,
  modificationi,
  examine,
  rightButtons,
  dictionaries,
  searchComponentsCss,
  importXlsx,
} from "@/views/components/FLPage";
import exportXlsxOne from "@/views/components/FLPage/exportXlsxOne";
import {
  addFlWaterMeterRecord, //增加
  deleteFlWaterMeterRecord, //删除
  searchFlWaterMeterRecord, //分页查询
  modifyFlWaterMeterRecord, //修改
  getFlWaterMeterRecord, //根据ID获取
  exprotXls, //导出xlsx数据
  downTem, //导出下载模板
} from "@/api/waterAnalysis/flWaterMeterRecord/index";
import { getFullTime, getNowTime } from "@/utils";
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    importXlsx,
    rightButtons,
    exportXlsxOne,
    searchComponentsCss,
    dictionaries,
  },
  props: ["areaCode", "waterNo"],
  name: "FlWaterMeterRecord",
  data() {
    return {
      numSearch: 0,
      oDisabled: false,
      //   收缩框开关
      shrinkBoxOpenClose: false,
      importUrl: `/api/cb/flWaterMeterRecord/importXls`,
      //搜索框
      suoS: {},
      //   搜索组件的数据
      searchData: [
        {
          EN: "waterNo",
          CN: "水表编号",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "readType",
          CN: "抄表方式",
          value: "",
          type: "select",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          typeGroupCode: "meterread_type",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: "lastNumDate",
          CN: "上期抄表",
          value: "",
          type: "date",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "lastNum",
          CN: "上期读数",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "readNumDate",
          CN: "本期抄表日期",
          value: getFullTime(),
          defaultFullTime: getFullTime(),
          type: "date",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "readNumDate1",
          CN: "本期抄表日期止",
          value: getNowTime(),
          defaultFullTime: getNowTime(),
          type: "date",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: "dayCount",
          CN: "跨越天数",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: "readNum",
          CN: "当期读数",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "useCount",
          CN: "用水量",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "userCode",
          CN: "客户编号",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "customerName",
          CN: "客户名称",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{1,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "freeingData",
          CN: "缓存数据",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: "freeingDate",
          CN: "缓存日期",
          value: "",
          type: "date",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: "tapsatatus",
          CN: "阀门状态",
          value: "",
          type: "select",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          typeGroupCode: "tapsatatus",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "addresscode",
          CN: "表计地址码",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "signalintensity",
          CN: "信号强度",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "imei",
          CN: "IMEI",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "batterystatus",
          CN: "电池状态",
          value: "",
          type: "select",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          typeGroupCode: "batterystatus",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: "version",
          CN: "版本号",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: "cycleOfUpload",
          CN: "上报周期",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: "",
        pqName: "",
        pqNum: "",
        BH: "",
      },
      //删除----Start--------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start--------------------------------------

      //查看的弹窗控制器
      DialogVisibleExamine: false,

      //查看的数据
      examineData: {},

      //查看----End----------------------------------------

      //表格数据
      //后端传来的数据
      dataAttribute: [],
      //表格选中
      multipleSelection: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数,
      modelType: "table",
      optionsZi: [],
      searchOptionTable: [],
    };
  },
  computed: {
    optionDatas() {
      return function (arr, val) {
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == val) {
              return arr[i].label;
            }
          }
        }
      };
    },
    customMethod() {
      return "custom";
    },
  },
  created() {
    this.getSSearchNum();
    this.forData(this.currentPage, this.pagesize, this.suoS);
  },
  methods: {
    // 排序
    sortChangeTable(obj) {
      // 上升
      let { prop, order } = obj;
      // 排序  需求  将驼峰形式的字段 改为 下划线形式的字段
      let abc = prop.replace(/([A-Z])/g, "_$1").toLowerCase();
      let { suoS } = this;
      suoS.sortName = abc;
      if (order === "ascending") {
        suoS.sortType = order;
      } else if (order === "descending") {
        suoS.sortType = order;
        // 下降
      } else {
        // 正常
        suoS.sortType = "";
      }

      this.forData(this.currentPage, this.pagesize, suoS); //刷新列表
    },
    // 搜索框
    getSSearchNum() {
      let searchData = this.searchData;
      let num = 0;
      for (let i = 0; i < searchData.length; i++) {
        const element = searchData[i];
        if (element.searchSign) {
          num += 1;
        } else {
          num = num;
        }
      }
      this.numSearch = num;
    },

    // 配置
    configuration(msg) {
      if (msg == "配置") {
        console.log(msg);
      }
    },
    // 重置
    emptySearch(msg) {
      if (msg == "重置") {
        this.currentPage = 1;
        this.suoS = {};
        this.waterNo = "";
        this.forData(this.currentPage, this.pagesize, this.suoS);
      }
    },
    // 字典组件回调
    dictionariesCallBack([a = {}, b = {}]) {
      // 正常字典
      this.optionsZi = a;
      // 跨表字典
      this.searchOptionTable = b;
      // this.forData(this.currentPage, this.pagesize, this.suoS);
    },
    //搜索
    sunS_F() {
      this.currentPage = 1;
      this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {};
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value;
      }
      console.log("=====", obj);
      this.suoS = obj;
    },
    //渲染数据初始
    forData(page, size, searchData) {
      this.searchData.forEach((item) => {
        if (item.EN == "waterNo") item.value = searchData.waterNo;
      });

      if (!searchData.readNumDate) searchData.readNumDate = getFullTime();
      if (!searchData.readNumDate1) searchData.readNumDate1 = getNowTime();
      searchFlWaterMeterRecord(page, size, searchData)
        .then((response) => {
          this.pagetotal = response.data.total;
          for (let i = 0; i < 50; i++) {
            this.dataAttribute.push(response.data.list[0]);
          }
          // this.dataAttribute = response.data.list
          this.oDisabled = this.dataAttribute.length ? false : true;
        })
        .catch((err) => {
          this.oDisabled = true;
        });
    },
    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      let obj = {};
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value;
      }
      addFlWaterMeterRecord(obj)
        .then((response) => {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          this.$message({
            message: "添加成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message.error("添加失败");
        });
    },
    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm("确认删除？")
        .then((_) => {
          let idArr = [];
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id);
          }
          if (idArr.length == 0) {
            this.$message({
              message: "请选择要删除的数据",
              type: "warning",
            });
            return;
          }
          deleteFlWaterMeterRecord(idArr)
            .then((response) => {
              this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
              this.$message({
                message: "删除成功",
                type: "success",
              });
            })
            .catch((error) => {
              this.$message({
                message: "删除失败",
                type: "warning",
              });
            });
        })
        .catch((_) => {});
    },
    //单项删除
    deleteList(id) {
      let arrId = [id];
      this.$confirm("确认删除？")
        .then((_) => {
          deleteFlWaterMeterRecord(arrId).then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            this.$message({
              message: "删除成功",
              type: "success",
            });
          });
          done();
        })
        .catch((_) => {});
    },
    //查看
    makeExaId(id) {
      getFlWaterMeterRecord(id)
        .then((response) => {
          let copyDialog = true;
          this.DialogVisibleExamine = copyDialog;
          // console.log(response);
          this.examineData = response.data;
        })
        .catch((error) => {
          alert("获取失败");
        });
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false;
    },

    //修改
    modifyData(value, modData) {
      if (value) {
        let id = modData.id;
        modifyFlWaterMeterRecord(id, modData)
          .then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          })
          .catch((error) => {
            this.$message({
              message: "修改失败",
              type: "warning",
            });
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          });
      } else {
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
      }
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //传递删除的参数
      this.deleteDataList = val;
    },

    //分页
    handleSizeChange(val) {
      console.log("每页 " + val + " 条");
      this.pagesize = val;
      this.forData(this.currentPage, val, this.suoS);
    },
    handleCurrentChange(val) {
      console.log("当前页: " + val);
      this.currentPage = val;
      this.forData(val, this.pagesize, this.suoS);
    },
    // 序号
    indexMethod(index) {
      var currentPage = this.currentPage;
      var pagesize = this.pagesize;
      this.$nextTick(function () {
        currentPage = this.currentPage;
        pagesize = this.pagesize;
      });
      return currentPage * pagesize - pagesize + 1 + index;
    },
    // 下载模板请求
    exprotXlsx: exprotXls,
    downloadFile: downTem,
    //工具栏组件传来的参数
    // FTableFunction(attributeOrderCloneTwiceL) {
    //   this.attributeOrder = attributeOrderCloneTwiceL;
    // },
  },
  watch: {
    waterNo: {
      handler(newValue) {
        this.waterNo = newValue;

        this.currentPage = 1;
        this.suoS.waterNo = newValue;
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表

        // this.$forceUpdate()
      },
      deep: true,
      //immediate: true,
    },
  },
};
</script>

<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
.FlWaterMeterRecord {
  .shrinkBox {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    height: 25px;
    // border-bottom:1px solid #E6E6E6;
  }

  .FlWaterMeterRecordTop {
    .searchComponentsRecord {
      padding: 0px 0px 15px 0px !important;
    }

    .FlWaterMeterRecordSearch {
      height: 30px;
      margin-top: 8px;
      margin-right: 15px;
    }
  }

  /deep/ .el-table--mini {
    .gutter {
      display: table-cell !important;
    }

    .el-table__body-wrapper {
      .el-table__body {
        tbody {
          .el-table__row {
            height: 47px !important;
          }
        }
      }
    }

    .el-checkbox__inner {
      width: 12px;
      height: 12px;
    }

    // 改变表头的高度  改为45px
    /deep/.el-table__header-wrapper {
      .el-table__header {
        .has-gutter {
          tr {
            th {
              padding: 5px 0 !important;
              height: 34px;
              line-height: 34px;
            }

            // .is-leaf{
            //   padding: 5px 0 !important;

            // }
          }
        }
      }
    }

    // 表头操作固定定位
    /deep/.el-table__fixed-right {
      .el-table__header {
        thead {
          tr {
            th {
              padding: 5px 0 !important;
              height: 34px;
              line-height: 34px;

              .cell {
                // padding-bottom: 5px !important;
                //   height: 34px;
                //   line-height: 34px;
              }
            }
          }
        }
      }
    }
  }

  .right_row {
    display: flex !important;
    //justify-content: start;
    align-items: center;
    position: relative;

    .right_buttons {
      position: absolute;
      padding: 0px !important;
      right: 30px;
    }

    .buttonhurdle {
      padding: 0px !important;
    }
  }

  .do {
    display: flex;
  }

  .pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>
